import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Extras 1.4
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4

Item {
    id: element
    width: 192
    height: width*1.4
    property string element_tipText: "Ug(%)"
    property string element_cnmsgText: "定子电流"
    property string element_numsizeText: "V"
    property real text_value: 0
    property int text_valueLengthAfterPoint: 0
    property real circularGaugeMaximumValue: 200
    property real circularGaugeMinimumValue: 0
    property real circularGaugeHighlightValue: 80
    property real circularGaugeHighlightValueLow: -60
    property real circularGaugeValue: 0

    property real minSize:  Math.min(width/192, height/269)
    property color majorColor: "#44fdfd"


    ConicalGradient{
        id: radialGradient_bg
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width*0.9
        height: width
        clip: true
        smooth: true
        antialiasing: true

        source: Rectangle{
            width: radialGradient_bg.width
            height: radialGradient_bg.width
            anchors.fill: parent
            color: "transparent"
            border.color: "#77209cbd"
            border.width: radialGradient_bg.width*0.13
            radius: width / 2
        }
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#bbbb4010" }
            GradientStop { position: 145/360+circularGaugeHighlightValueLow/200*290/360-0.002; color: "#bbbb4010" }
            GradientStop { position: 145/360+circularGaugeHighlightValueLow/200*290/360-0.001; color: "#bb007777" }
//            GradientStop { position: 145/360+0.01; color: "#bb007777" }
            GradientStop { position: 145/360+circularGaugeHighlightValue/200*290/360-0.01; color: "#bb007777" }
            GradientStop { position: 145/360+circularGaugeHighlightValue/200*290/360+0.01; color: "#bbbb4010" }
            GradientStop { position: 290/360-0.01; color: "#bbbb4010" }
            GradientStop { position: 290/360+0.01; color: "transparent" }
            GradientStop { position: 1.0; color: "transparent" }
        }
        transform: Rotation
        {
            origin.x: radialGradient_bg.width/2;
            origin.y: radialGradient_bg.width/2;
            axis { x: 0; y: 0; z: 1 }
            angle: -145
        }
    }

    ConicalGradient{
        id: radialGradient
        width: parent.width*0.9
        height: width
        anchors.horizontalCenter: parent.horizontalCenter
        clip: true
        smooth: true
        antialiasing: true
        property real mvalue: circularGaugeValue<circularGaugeMaximumValue?
                                  (circularGaugeValue>circularGaugeMinimumValue?
                                       circularGaugeValue:circularGaugeMinimumValue):circularGaugeMaximumValue
        Behavior on mvalue {
            NumberAnimation { duration: 100 }
        }

//        property color color1:mvalue<circularGaugeHighlightValue?"#3300ced1":"#33ff7f50"
//        property color color2:mvalue<circularGaugeHighlightValue?"#ee00ced1":"#eeff7f50"
        property color color1:(mvalue<circularGaugeHighlightValue&&mvalue>circularGaugeHighlightValueLow)?"#3300ced1":"#33ff7f50"
        property color color2:(mvalue<circularGaugeHighlightValue&&mvalue>circularGaugeHighlightValueLow)?"#ee00ced1":"#eeff7f50"


        source: Rectangle {
            width: radialGradient.width
            height: radialGradient.width
            color: "transparent"
            border.color: "green"
            border.width: radialGradient.width*0.13
            radius: width / 2
        }
        gradient: Gradient {
            GradientStop { position: 0.0; color: "transparent" }
            GradientStop { position: 180/360-Math.abs(radialGradient.mvalue)/200*290/360-0.002; color: "transparent" }
            GradientStop { position: 180/360-Math.abs(radialGradient.mvalue)/200*290/360-0.001; color: radialGradient.mvalue>0?"transparent":radialGradient.color2 }
            GradientStop { position: 180/360-0.001; color: radialGradient.mvalue>0?"transparent":radialGradient.color1 }
            GradientStop { position: 180/360+0.001; color: radialGradient.mvalue>0?radialGradient.color1:"transparent" }
            GradientStop { position: 180/360+Math.abs(radialGradient.mvalue)/200*290/360+0.001; color: radialGradient.mvalue>0?radialGradient.color2:"transparent" }
            GradientStop { position: 180/360+Math.abs(radialGradient.mvalue)/200*290/360+0.002; color: "transparent" }
            GradientStop { position: 1.0; color: "transparent" }
        }
        transform: Rotation
        {
            origin.x: radialGradient.width/2;
            origin.y: radialGradient.width/2;
            axis { x: 0; y: 0; z: 1 }
            angle: -180
        }
    }


    Text {
        color: majorColor
        text: circularGaugeValue.toFixed(2)
        anchors.topMargin: 40
        anchors.top: radialGradient.top
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 28*parent.minSize
    }
    Text {
        id: element_tip
        color: majorColor
        text: qsTr(element_tipText)
        anchors.bottomMargin: 40
        anchors.bottom: radialGradient.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 28*parent.minSize
        font.bold: true
    }

    Text {
        id: text_valueNum
        width: 60
        color: majorColor
        text: text_value.toFixed(text_valueLengthAfterPoint)
        horizontalAlignment: Text.AlignRight
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: radialGradient.bottom
        font.pixelSize: 25*parent.minSize
        font.bold: true
    }

    Text {
        id: element_numsize
        color: majorColor
        text: element_numsizeText
        anchors.left: text_valueNum.right
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: radialGradient.bottom
        font.pixelSize: 25*parent.minSize
        font.bold: true
    }

    Text {
        id: element_cnmsg
        color: majorColor
        text: element_cnmsgText
        font.bold: true
        font.family: "Verdana"
        textFormat: Text.AutoText
        anchors.topMargin: 13
        horizontalAlignment: Text.AlignHCenter
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: element_numsize.bottom
        font.pixelSize: 30*parent.minSize

    }
}
